<template>
<div class="xyt-talk-message">
  <xytDialog ref="xytDialogRef" position="center" @close="closeDialog">
    <img class="xyt-dialog-bg" src="../../assets/img/dialog-bg.png" alt="">
    <dib class="xyt-talk-message-box">
      <img class="bg" src="../../assets/img/fj-decorate.png" alt="">
      <div class="xyt-reply-box">
        <textarea placeholder="诉说一下你的烦恼，分享一下你的喜悦" v-model="content" @input="changeContent"></textarea>
        <span class="count">{{ content.length }}/{{ count }}</span>
      </div>
      <van-radio-group class="xyt-send-radio" v-model="plane_type" direction="horizontal">
        <van-radio name="2">发送至大厅</van-radio>
        <van-radio name="1">随机发送</van-radio>
        <!-- <van-radio name="0">指定人</van-radio> -->
      </van-radio-group>
      <!-- <van-field v-if="plane_type === '1'" v-model="mobile_number" placeholder="请输入手机号" label="手机号"></van-field> -->
      <XytBtn @click="reply" class="mt30">发送</XytBtn>
    </dib>
  </xytDialog>
</div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import xytDialog from '../common/dialog/xytDialog.vue'
import { Toast } from 'vant'
import XytBtn from '../common/XytBtn.vue';
import { addPaperPlan } from './../../api/fly.js'
import { useUserInfo } from './../../stores/userInfo.js'

let content = ref('')
let count = 150
let plane_type = ref('2')
let mobile_number = ref('')
let userInfoStore = useUserInfo()

function open() {
  content.value = ''
  xytDialogRef.value.open()
}
function close() {
  xytDialogRef.value.close()
}
const xytDialogRef = ref(null)
defineExpose({
  open
})
const emit = defineEmits(['close'])
function closeDialog() {
  emit('close')
}
async function reply() {
  await addPaperPlan({
    plane_type: plane_type.value,
    content: content.value,
    mobile_number: mobile_number.value || ''
  })
  Toast('发送成功！')
  close()
}
function changeContent() {
  if (content.value.length > count) {
    content.value = content.value.substring(0, count)
  }
}
</script>
<style scoped lang="scss">
.xyt-dialog-bg {
  position: relative;
  width: 100%;
}
.xyt-talk-message-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 25% 22px 0 22px;
  .bg {
    position: absolute;
    left: 22px;
    top: 20%;
    width: 30px;
    z-index: 99;
  }
  .xyt-btn {
  }
}
.xyt-reply-box {
  position: relative;
  padding: 8px;
  background: #FAFAFA;
  box-shadow: inset 0px 1px 6px 0px rgba(118, 158, 226, 0.14);
  border-radius: 8px;
  height: 100px;
  overflow: auto;
  .content {
    position: relative;
  }
  textarea {
    display: block;
    height: 76%;
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
  }
  .count {
    position: absolute;
    right: 8px;
    bottom: 4px;
    color: #999;
  }
}
.van-radio {
  font-size: 12px;
}
.xyt-send-radio {
  padding: 10px 0;
}
</style>